<script setup lang="ts">
import {ref, watch} from "vue";
import useSettingStore from '../setting.store'
import {boardType} from "@/app/setting/types/board-type";

const settingStore = useSettingStore()
//被选中的菜单项
const selectedKeys = ref<Array<boardType> | null>(['GeneralSetting'])
//被打开的菜单项
const openKeys = ref<Array<string> | null>(["general"])

//设置菜单列表配置
interface settingMenuType {
  icon: string,
  //key必须和引入时的名字一样
  key: string,
  title: string,
  disabled: boolean,
  children?: Array<settingChildMenuType>
}

interface settingChildMenuType {
  icon: string,
  //key必须和引入时的名字一样
  key: boardType,
  title: string,
  disabled: boolean,
}


//设置菜单列表
const settingMenuList = ref<Array<settingMenuType>>([
  {
    icon: 'dns',
    key: 'general',
    title: '通用设置',
    disabled: false,
    children: [
      {
        icon: 'dns',
        key: 'GeneralSetting',
        title: '通用设置',
        disabled: false,
      }
    ]
  }, {
    icon: 'chat',
    key: 'message',
    title: '消息设置',
    disabled: false,
    children: [
      {
        icon: 'chat',
        key: 'MessageSetting',
        title: '消息设置',
        disabled: false,
      }
    ]
  }, {
    icon: 'account_circle',
    key: 'profile',
    title: '个人资料',
    disabled: false,
    children: [
      {
        icon: 'account_circle',
        key: 'ProfileSetting',
        title: '个人资料',
        disabled: false,
      }
    ]
  },
])

//受风情效果，只打开一层父级
const onOpenChange = (key: string[]) => {
  settingStore.setOpenKeys(key[key.length - 1])

}

watch(() => openKeys.value, (newVal) => {
  console.log(newVal)
})

</script>
<template>
  <a-menu
      class="menu"
      mode="inline"
      v-model:openKeys="settingStore.openKeys"
      v-model:selectedKeys="settingStore.selectedKeys"
      @openChange="onOpenChange"
  >
    <template v-for="menu in settingMenuList" :key="menu.key">
      <template v-if="menu.children">
        <a-sub-menu :key="menu.key">
          <template #title>{{ menu.title }}</template>
          <template #icon><span class="material-icons">{{ menu.icon }}</span></template>
          <template v-for="menuItem in menu.children" :key="menuItem.key">
            <template v-if="menuItem">
              <a-menu-item :disabled="menuItem.disabled" :key="menuItem.key">
                {{ menuItem.title }}
                <template #icon><span class="material-icons">{{ menuItem.icon }}</span></template>
              </a-menu-item>
            </template>
          </template>
        </a-sub-menu>
      </template>

      <template v-else>
        <a-menu-item :disabled="menu.disabled" :key="menu.key">
          {{ menu.title }}
          <template #icon><span class="material-icons">{{ menu.icon }}</span></template>
        </a-menu-item>
      </template>
    </template>
  </a-menu>
</template>
<style lang="less" scoped>
.menu {
  height: 100%;
  width: 150px;
  background-color: #F2F4F7;

  .menu-item-title {

    color: #2E3033;
  }
}
</style>
